<template>
	<CustomContainer pagePath="home" title="首页">
		<!-- 自定义右侧内容 -->
		<!-- <view slot="right">
			<text class="right-text">更多</text>
		</view> -->
		<view class="homeBox">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
				<view class="cloth-item" @click="goToClothes">
					<view class="item-top">
						<image class="item-icon" src="../../static/clothing_action.png"></image>
						<text>服装管理</text>
					</view>
					<view class="item-bot">
						是否每天在为穿什么发愁？该模块主要提供衣物管理功能，可上根据衣物种类上传衣物图片，并进行展示，可快速挑选心仪的服饰。
						<!-- </br> -->
						<view>主要功能：添加并上传衣服，设置衣物分类，根据分类展示对应衣服信息。</view>
					</view>
				</view>
				<view class="cloth-item" @click="goToDishes">
					<view class="item-top">
						<image class="item-icon" src="../../static/menu_action.png"></image>
						<text>菜品管理</text>
					</view>
					<view class="item-bot">
						是否每天在为吃什么发愁？
						<!-- </br> -->
						<view>该模块主要提供拍平管理功能，可根据菜品种类上传菜品图片，并进行展示，可快速挑选心仪的服饰。</view>
					</view>
				</view>
				<view class="cloth-item" @click="goToOrder">
					<view class="item-top">
						<image class="item-icon" src="../../static/order_action.png"></image>
						<text>订单管理</text>
					</view>
					<view class="item-bot">该模块主要提供订单管理功能。</view>
				</view>
				<view class="cloth-item" @click="goToManage">
					<view class="item-top">
						<image class="item-icon" src="../../static/system_action.png"></image>
						<text>系统管理</text>
					</view>
					<view class="item-bot">该模块主要管理系统信息，只有管理员有权限。</view>
				</view>
				<!-- <view @click="textBut">测试</view> -->
			</scroll-view>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog
					:type="msgType"
					cancelText="再想想"
					confirmText="去登录"
					title="通知"
					content="请登录后使用完整功能"
					@confirm="dialogConfirm"
					@close="dialogClose"
				></uni-popup-dialog>
			</uni-popup>
		</view>
	</CustomContainer>
</template>

<script>
import CustomContainer from '@/components/CustomContainer.vue';

export default {
	data() {
		return {
			scrollTop: 0,
			type: 'center',
			msgType: 'success',
			messageText: '这是一条成功提示',
			value: '',
			pagePath: 'home'
		};
	},
	components: {
		CustomContainer
	},
	methods: {
		watchPagePath(key, path) {
			const token = uni.getStorageSync('token');
			if (!token) {
				this.$refs.alertDialog.open();
			} else {
				switch (key) {
					case 'manage':
						uni.navigateTo({
							url: path
						});
						break;
					default:
						uni.switchTab({
							url: path
						});
						break;
				}
			}
		},
		goToClothes() {
			this.watchPagePath('clothes', '/pages/clothes/clothes');
		},
		goToDishes() {
			this.watchPagePath('dishes', '/pages/dishes/dishes');
		},
		goToOrder() {
			this.watchPagePath('order', '/pages/order/order');
		},
		goToManage() {
			this.watchPagePath('manage', '/pages/home/manage');
		},
		dialogConfirm() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		dialogClose() {
			uni.switchTab({
				url: '/pages/home/home'
			});
		}
		// textBut() {
		// 	uniCloud
		// 		.callFunction({
		// 			name: 'Clothes_List',
		// 			data: {
		// 				action: 'getClothList',
		// 				params: {
		// 					userId: ['lms3605', 'zwj3606'],
		// 					//type: '类型'
		// 				}
		// 			}
		// 		})
		// 		.then(res => {
		// 			console.log('res', res);
		// 		});
		// }
	}
};
</script>

<style scoped lang="less">
.homeBox {
	// padding-left: 8px;
	// padding-right: 8px;
	.scroll-Y {
		box-sizing: border-box;
		height: 100%;
		// padding: 16px;
	}

	.cloth-item {
		//padding: 16px;
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 8px;

		.item-top {
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgb(240, 240, 240);
			padding: 16px;
			font-weight: 600;

			.item-icon {
				width: 40px;
				height: 40px;
				margin-right: 8px;
			}
		}

		.item-bot {
			padding: 16px;
			line-height: 24px;
			font-size: 14px;
		}
	}
}
</style>
